<template>
  <div class="container">
    <div class="header1" style="padding: 10px; background-color: white; border: solid 1px #e2e2e2; margin-bottom: 15px">
      <div style="display: flex; justify-content: flex-start"></div>
      <div style="display: flex; justify-content: flex-end">
        <a-button class="hte-btn del-btn" @click="handleSave">保存</a-button>
      </div>
    </div>
    <div class="content-list">
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <section>
          <div class="section-header">基础信息</div>
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="接收人:" prop="toEmail">
                <a-input v-model="form.toEmail" />
              </a-form-model-item>
            </a-col>
            <a-col :span="16">
              <a-form-model-item label="标题:" prop="title">
                <a-input v-model="form.title" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </section>
      </a-form-model>
      <section>
        <div class="section-header">
          邮件正文
          <a-link @click="refrashContent" style="font-size: 12px; margin-left: 20px; cursor: pointer; color: #47a4fa"
            >刷新正文</a-link
          >
        </div>
        <div style="height: 600px">
          <FileContentEditor ref="content" />
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import { getQuery } from '@/utils/common.js'
export default {
  components: {
    HomeNav: () => import('@/components/layouts/HomeNav'),
    FileContentEditor: () => import('@/views/library/components/FileContentEditor'),
  },
  data() {
    return {
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'ContractReportInfo',
      },
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      id: getQuery('id', this),
      form: {},
      rules: {
        toEmail: [{ required: true, message: '请输入', trigger: 'blur' }],
        title: [{ required: true, message: '请输入', trigger: 'blur' }],
      },
      urls: {
        info: '/hteEmailLogs/info',
        edit: '/hteEmailLogs/edit',
      },
    }
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.fetchForm()
    })
  },
  watch: {},
  methods: {
    fetchForm() {
      if (this.id) {
        getAction(this.urls.info + '?id=' + this.id).then((res) => {
          if (res.success) {
            this.form = res.result
            this.$refs.content.setContent(res.result.content)
          } else {
            this.$message.error('加载数据失败')
          }
        })
      }
    },

    /**
     * 保存信息
     */
    async handleSave() {
      let valid = await this.$refs.ruleForm.validate()
      if (!valid) {
        this.$messageWorkReport.warning('请根据提示将表单填写完整')
        return false
      }
      this.form.content = this.$refs.content.getContent()
      postAction(this.urls.edit, this.form).then((res) => {
        if (res.success) {
          if (this.id) {
            this.$message.success('保存成功')
            this.fetchForm()
          } else {
            this.$route.push('/emailLogEdit?id=' + res.result.id)
          }
        } else {
          this.$message.error('保存失败' + res.message)
        }
      })
    },
    refrashContent() {
      this.$refs.content.setContent(this.form.content)
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
.container {
  .content {
    margin-top: 20px;

    section {
      margin-bottom: 18px;

      .section-table {
        .add-btn {
          margin-left: 0;
          margin-bottom: 10px;
        }

        /deep/ .a-upload__input {
          display: none !important;
        }
      }
    }
  }
}

.tips-box {
  margin-top: 32px;

  .add-btn {
    width: 180px;
    height: 40px;
    line-height: 40px;
    background-color: #4095e4;
    border-radius: 2px;
  }
}

/deep/ .el-upload__input {
  display: none !important;
}
</style>
